
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>css - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>css - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">CSS 被设计用来解决什么核心问题？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">CSS 的设计初衷是为了解决内容与表现分离的问题。它通过样式来定义 HTML 元素的显示方式，并将这些样式通常存储在样式表中。</div>
          </div>
          <div class="card-source">来源: CSS 概述</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">规则</div>
          <div class="card-question">在 CSS 中，ID 选择器、类选择器和标签选择器的优先级顺序是怎样的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">规则</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">这三种基本选择器的优先级从高到低依次是：ID选择器 > 类选择器 > 标签选择器。</div>
          </div>
          <div class="card-source">来源: 三种基本选择器的优先级</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模型</div>
          <div class="card-question">CSS 盒子模型（Box Model）包含了哪几个核心部分？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模型</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">CSS 盒子模型规定了元素框如何处理四个部分：元素内容（content）、内边距（padding）、边框（border）和外边距（margin）。</div>
          </div>
          <div class="card-source">来源: 盒子模型</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">CSS 提供了哪三种基本的定位机制？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">CSS 有三种基本的定位机制：普通流（normal flow）、浮动（float）和绝对定位（absolute positioning）。</div>
          </div>
          <div class="card-source">来源: 定位</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">绝对定位（absolute positioning）的元素是如何确定其位置的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">绝对定位的元素会相对于其拥有 position 属性的最近一级父级元素进行定位。如果所有父级元素都没有 position 定位，则会以最外层的 body 元素为基准进行定位。同时，绝对定位的元素不会保留其在文档流中的原始位置空间。</div>
          </div>
          <div class="card-source">来源: 绝对定位</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">使用浮动（float）会带来什么副作用？文档中提到的解决方法是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">浮动的副作用是它会使元素脱离标准文档流，从而导致其父级元素无法被撑开（高度塌陷）。解决方法是在浮动元素的后面添加一个空的 div 元素，并为其设置 `clear:both;` 样式。</div>
          </div>
          <div class="card-source">来源: 浮动</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">锚伪类（anchor pseudo-classes）可以定义链接的哪几种不同状态？请列出它们对应的选择器。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">锚伪类可以定义链接的四种状态：<br>1. 未访问的链接 (a:link)<br>2. 已访问的链接 (a:visited)<br>3. 鼠标悬停在链接上 (a:hover)<br>4. 选定的链接 (a:active)</div>
          </div>
          <div class="card-source">来源: 锚伪类</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">相对定位（relative positioning）的特点是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">相对定位是相对于元素在普通流中的原有位置进行移动，并且移动后仍会保留其原有的空间位置，不会影响其他元素的布局。</div>
          </div>
          <div class="card-source">来源: 相对定位</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">如何使用属性选择器来选中同时具有 `href` 和 `title` 两个属性的 `<a>` 标签？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">可以通过将多个属性选择器链接在一起的方式进行选择。例如，要选中同时拥有 `href` 和 `title` 属性的 `<a>` 标签，可以写作 `a[href][title]`。</div>
          </div>
          <div class="card-source">来源: 属性选择器</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
